<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  label-position="right" label-width="200px" class="demo-ruleForm" size="large" >

      <el-form-item label="OrderID"  >
        <el-input v-model="ruleForm.orderId" readonly style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="UserID" prop="userId">
        <el-input v-model="ruleForm.userId"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="OrderDate" prop="orderDate">
        <el-input v-model="ruleForm.orderDate"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="ShipAddress" prop="shipAddress">
        <el-input v-model="ruleForm.shipAddress"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="ShipCity" prop="shipCity">
        <el-input v-model="ruleForm.shipCity"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="ShipState" prop="shipState">
        <el-input v-model="ruleForm.shipState"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="ShipZip" prop="shipZip">
        <el-input v-model="ruleForm.shipZip"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="ShipCountry" prop="shipCountry">
        <el-input v-model="ruleForm.shipCountry"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="BillAddress" prop="billAddress">
        <el-input v-model="ruleForm.billAddress"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="BillCity" prop="billCity">
        <el-input v-model="ruleForm.billCity"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="BillState" prop="billState">
        <el-input v-model="ruleForm.billState"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="BillZip" prop="billZip">
        <el-input v-model="ruleForm.billZip"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="BillCountry" prop="billCountry">
        <el-input v-model="ruleForm.billCountry"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="Courier" prop="courier">
        <el-input v-model="ruleForm.courier"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="TotalPrice" prop="totalPrice">
        <el-input v-model="ruleForm.totalPrice"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="BillToFirstname" prop="billToFirstName">
      <el-input v-model="ruleForm.billToFirstName"style="width:300px"></el-input>
    </el-form-item>
      <el-form-item label="BillToLastname" prop="billToLastName">
      <el-input v-model="ruleForm.billToLastName"style="width:300px"></el-input>
    </el-form-item>
      <el-form-item label="ShipToFirstname" prop="shipToFirstName">
      <el-input v-model="ruleForm.shipToFirstName"style="width:300px"></el-input>
    </el-form-item>
      <el-form-item label="ShipToLastname" prop="shipToLastName">
      <el-input v-model="ruleForm.shipToLastName"style="width:300px"></el-input>
    </el-form-item>
      <el-form-item label="Creditcard" prop="creditCard">
        <el-input v-model="ruleForm.creditCard"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="ExpiryDate" prop="expiryDate">
        <el-input v-model="ruleForm.expiryDate"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="CardType" prop="cardType">
        <el-input v-model="ruleForm.cardType"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="Locale" prop="locale">
        <el-input v-model="ruleForm.locale"style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="Status" prop="status">
        <el-input v-model="ruleForm.status"style="width:300px"></el-input>
      </el-form-item>








      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        orderId:this.$route.query.orderId,
        userId:this.$route.query.userId,
        email:this.$route.query.email,
        orderDate:this.$route.query.orderDate,
        shipAddress:this.$route.query.shipAddress,
        shipCity:this.$route.query.shipCity,
        shipState:this.$route.query.shipState,
        shipZip:this.$route.query.shipZip,
        shipCountry:this.$route.query.shipCountry,
        billAddress:this.$route.query.billAddress,
        billCity:this.$route.query.billCity,
        billState:this.$route.query.billState,
        billZip:this.$route.query.billZip,
        billCountry:this.$route.query.billCountry,
        courier:this.$route.query.courier,
        totalPrice:this.$route.query.totalPrice,
        billToFirstName:this.$route.query.billToFirstName,
        billToLastName:this.$route.query.billToLastName,
        shipToFirstName:this.$route.query.shipToFirstName,
        shipToLastName:this.$route.query.shipToLastName,
        creditCard:this.$route.query.creditCard,
        expiryDate:this.$route.query.expiryDate,
        cardType:this.$route.query.cardType,
        locale:this.$route.query.locale,
        status:this.$route.query.status



      },
      rules: {
        userId: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        orderDate: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        shipAddress: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],

        shipCity: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        shipState: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        shipZip: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        shipCountry: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        billAddress: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],

        billCity: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        billState: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        billZip: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        billCountry: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        courier: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        totalPrice: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        billToFirstName: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        billToLastName: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        shipToFirstName: [
        { required: true, message: '请输入正确的内容', trigger: 'blur' },
      ],
        shipToLastName: [
        { required: true, message: '请输入正确的内容', trigger: 'blur' },
      ],
        creditCard: [
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        expiryDate :[
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        cardType:[
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        locale :[
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ],
        status :[
          { required: true, message: '请输入正确的内容', trigger: 'blur' },
        ]

      }
    };
  },
  methods: {
    submitForm(formName) {
      const _this=this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(_this.ruleForm)
          axios({
            method: "PATCH",
            url: 'http://115.29.176.82:8081/manager/api/orders',
            data: {
              orderId: _this.ruleForm.orderId,
              userId: _this.ruleForm.userId,
              email: _this.ruleForm.email,
              orderDate: _this.ruleForm.orderDate,
              shipAddress: _this.ruleForm.shipAddress,
              shipCity: _this.ruleForm.shipCity,
              shipState: _this.ruleForm.shipState,
              shipZip: _this.ruleForm.shipZip,
              shipCountry: _this.ruleForm.shipCountry,
              billAddress: _this.ruleForm.billAddress,
              billCity: _this.ruleForm.billCity,
              billState: _this.ruleForm.billState,
              billZip: _this.ruleForm.billZip,
              billCountry: _this.ruleForm.billCountry,
              courier: _this.ruleForm.courier,
              totalPrice: _this.ruleForm.totalPrice,
              billToFirstName: _this.ruleForm.billToFirstName,
              billToLastName: _this.ruleForm.billToLastName,
              shipToFirstName: _this.ruleForm.shipToFirstName,
              shipToLastName: _this.ruleForm.shipToLastName,
              creditCard: _this.ruleForm.creditCard,
              expiryDate: _this.ruleForm.expiryDate,
              cardType:_this.ruleForm.cardType,
              locale: _this.ruleForm.locale,
              status: _this.ruleForm.status
            }
            }).then(function (resp) {
            console.log(resp)
            if (resp.status ===200)
              alert('修改成功，请继续您的操作')
          })
        }else {
          alert('ERROR！请修改您的数据后再次提交')
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },

  // created() {
  //   const _this=this
  //   //此处需要根据orderid查询信息填写到表格的数据接口+this.$route.query.orderid
  //   axios.get('                 ').then(function (resp){
  //     _this.ruleForm = resp.data
  //
  //   })
  // }

}
</script>